<template>
  <view class="add">
    <view class="content">
      <view class="line">
        <view class="title"><!-- <text class="count">*</text> -->物品信息</view>
        <view class="choose">
          <u-input
            placeholder="请填写物品名称"
            border="none"
            v-model="nameValue"
            :customStyle="inputStyle"
          ></u-input>
          <!-- placeholderStyle="{'font-size': '28rpx';
        'color':' #999999'}" -->
        </view>
      </view>
      <!-- <view class="line">
        <view class="title">品牌</view>
        <view class="choose">
          <u-input
            placeholder="请填写品牌"
            border="none"
            v-model="brandValue"
            :customStyle="inputStyle"
          ></u-input>
        </view>
      </view>
      <view class="line">
        <view class="title">规格</view>
        <view class="choose">
          <u-input
            placeholder="请填写规格"
            border="none"
            v-model="specsValue"
            :customStyle="inputStyle"
          ></u-input>
        </view>
      </view> -->
      <view class="line">
        <view class="title"><!-- <text class="count">*</text> -->数量(件)</view>
        <view class="choose">
          <u-input
            placeholder="请填写数量"
            border="none"
            v-model="numberValue"
            :customStyle="inputStyle"
          ></u-input>
          <!-- placeholderStyle="{'font-size': '28rpx';
        'color':' #999999'}" -->
        </view>
      </view>
      <view class="line">
        <view class="title"><!-- <text class="count">*</text> -->单价(元)</view>
        <view class="choose">
          <u-input
            placeholder="请填写单价"
            border="none"
            v-model="priceValue"
            :customStyle="inputStyle"
          ></u-input>
          <!-- placeholderStyle="{'font-size': '28rpx';
        'color':' #999999'}" -->
        </view>
      </view>
    </view>
    <view class="btnbox">
      <view class="btn1" @click="cancel">取消</view>
      <view class="btn2" @click="confirm">{{
        patternType ? "确认修改" : "确认添加"
      }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 输入框样式
      inputStyle: {
        "background-color": "#F5F5F5",
        "border-radius": "5rpx",
        "padding-left": "43rpx",
        padding: "30rpx",
      },
      // 名称
      nameValue: "",
      // 品牌
      brandValue: "",
      // 规格
      specsValue: "",
      // 数量
      numberValue: "",
      // 价格
      priceValue: "",
      // 页面类型false为添加，true为修改
      patternType: false,
	  options:'',
	  info:'',
	  isModify:false
    };
  },
  onLoad(options) {
	if(options.form){
	  	this.options = JSON.parse(options.form);
		console.log(this.options,"this.options 1")
	}
    if (options.articleInfo) {
      let info = JSON.parse(options.articleInfo);
	  let infos = {};
	  infos.index = info.index;
      this.nameValue = info.title;
	  infos.nameValue = info.title;
      let ainfo = info.detailList;
      ainfo.forEach((element) => {
        this.patternType = true;
        uni.setNavigationBarTitle({
          title: "修改物品",
        });
        if (element.specs == "数量") {
          this.numberValue = element.count;
		  infos.numberValue = element.count;
        }
    //     if (element.specs == "规格") {
    //       this.specsValue = element.count;
		  // infos.specsValue = element.count;
    //     }
    //     if (element.specs == "品牌") {
    //       this.brandValue = element.count;
		  // infos.brandValue = element.count;
    //     }
        if (element.specs == "单价") {
          this.priceValue = element.count;
		  infos.priceValue = element.count;
        }
      });
	  this.info = JSON.parse(JSON.stringify(infos));
	  console.log(this.info,"this.info 1111")
    }
  },
  onUnload(){
	  // if(this.info && this.info.nameValue){
		 //  this.cancel();
	  // }
  },
  methods: {
    cancel() {
      // this.$uniApi.to(`/pages/home/packagePrediction?data=${this.options}`);
	  let articleInfo = JSON.stringify({
	    title: this.info.nameValue,
	    detailList: [
	      { specs: "数量", count: this.info.numberValue },
	      // { specs: "规格", count: this.info.specsValue },
	      // { specs: "品牌", count: this.info.brandValue },
	      { specs: "单价", count: this.info.priceValue },
	    ],
		index:this.info.index
	  });
	  console.log(this.info,"this.info",this.options,"this.options");
	  if(this.options.url){
		  let url = this.options.url;
		  delete this.options.url;
		  this.$uniApi.to(
			`${url}?articleInfo=${articleInfo}&form=${JSON.stringify(this.options)}`
		  );
	  }else{
		  uni.redirectTo({
		  	url:`/pages/home/packagePrediction?articleInfo=${articleInfo}&data=${JSON.stringify(this.options)}`
		  })
	  }
    },
    confirm() {
      // if (!this.nameValue) {
      //   this.$u.toast("请填写物品名称");
      //   return;
      // }
      // if (!this.numberValue) {
      //   this.$u.toast("请填写数量");
      //   return;
      // }
      // if (!this.priceValue) {
      //   this.$u.toast("请填写单价");
      //   return;
      // }
      let articleInfo = JSON.stringify({
        title: this.nameValue,
        detailList: [
          { specs: "数量", count: this.numberValue },
          // { specs: "规格", count: this.specsValue },
          // { specs: "品牌", count: this.brandValue },
          { specs: "单价", count: this.priceValue },
        ],
		index:this.info.index
      });
	  if(this.options.url){
		  let url = this.options.url;
		  delete this.options.url;
		  this.isModify = true;
		  this.$uniApi.to(
		    `${url}?articleInfo=${articleInfo}&form=${JSON.stringify(this.options)}`
		  );
	  }else{
		  uni.redirectTo({
		    url:`/pages/home/packagePrediction?articleInfo=${articleInfo}&data=${JSON.stringify(this.options)}`
		   });
	  }
      
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
}

.add {
  padding-top: 25rpx;

  .content {
    margin: 0 auto;
    width: 702rpx;
    padding: 42rpx 42rpx 100rpx 42rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
    border-radius: 10rpx;
    opacity: 1;

    .line {
      margin-bottom: 34rpx;

      .choose {
        .inputClass {
          width: 195rpx;
        }
      }

      .title {
        font-size: $uni-text-size-title;
        margin-bottom: 20rpx;

        .count {
          color: #ff0000;
        }
      }
    }
  }
  .btnbox {
    width: 750rpx;
    height: 130rpx;
    line-height: 130rpx;
    display: flex;
    font-size: $uni-text-size-title;
    text-align: center;
    position: absolute;
    bottom: 0;

    .btn1 {
      flex: 1;
      color: #999999;
      background-color: #e9e8e8;
    }

    .btn2 {
      flex: 1;
      color: #ffffff;
      background-color: #2354e3;
    }
  }
}
</style>
